<!-- 
  介绍下 ref() 与 reactive()
    两者都是Vue3新增的响应式API,用于创建可以修改[正确]的响应式数据

    1. reactive() 只能用于引用数据类型, ref() 基本数据类型与引用数据类型都可以
    2. ref() 如果传递的是一个引用数据类型的话,内部会通过 reactive() 来处理
    3. ref 数据的读取与修改需要 .value ,在模板中会自动解包
    4. reactive() 不要做解构,会丢失响应式
    5. reactive数据中,某个属性的值是一个 ref数据的话,两者会引用, 访问时会自动解包(数组或Map格式则不会)
 -->

<template>
  <div>
    <h1>App</h1>
    <button @click="obj.age">{{ obj.age }}</button>
  </div>
</template>

<script>
import { reactive, ref, readonly } from "vue";

export default {
  setup() {
    // reactive 只接受对象类型的参数, ref 基本数据与引用数据都可以
    // const obj = reactive("100");

    const obj = reactive({ name: "张三", age: 18 });
    console.log("obj", obj);

    // reactive 数据中某一项属性是一个 ref 数据,访问时会自动解包
    const count = ref(10);
    const obj2 = reactive({ count: count });
    // console.log("obj2.count", obj2.count);
    // 对 obj2.count 做修改,会引起 count 修改,反之亦然
    obj2.count++;
    console.log("obj2.count", obj2.count); // 11
    console.log("count", count.value); // 11

    count.value++;
    console.log("obj2.count", obj2.count); // 12
    console.log("count", count.value); // 12

    // ref 可以传递一个对象,内部会将该对象使用 reactive 方法处理
    const hello = ref({ a: 1, b: 2 });
    const world = ref("张三");
    console.log("hello", hello);
    console.log("world", world);

    // readonly 对数据做只读处理(返回的数据只读)
    const world2 = readonly(world);
    console.log("world2", world2);
    // world2.value = "里斯"; // 报错
    world.value = "里斯"; // 对原值没有影响
    console.log("world", world);
    console.log("world2", world2);

    return {
      obj,
    };
  },
};
</script>
